<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
  <title>结算页</title>
  <link rel="stylesheet" type="text/css" href="./css/webbase.css"/>
  <link rel="stylesheet" type="text/css" href="./css/pages-getOrderInfo.css"/>
  <link rel="stylesheet" type="text/css" href="./css/orderInfo.css"/>
</head>
<body>
<!--head-->
<div class="top">
  <div class="py-container">
    <div class="shortcut">
      <ul class="fl">
        <li class="f-item">黑马欢迎您！</li>
        <li class="f-item">请登录　<span><a href="#">免费注册</a></span></li>
      </ul>
      <ul class="fr">
        <li class="f-item">我的订单</li>
        <li class="f-item space"></li>
        <li class="f-item">我的黑马</li>
        <li class="f-item space"></li>
        <li class="f-item">黑马会员</li>
        <li class="f-item space"></li>
        <li class="f-item">企业采购</li>
        <li class="f-item space"></li>
        <li class="f-item">关注黑马</li>
        <li class="f-item space"></li>
        <li class="f-item">客户服务</li>
        <li class="f-item space"></li>
        <li class="f-item">网站导航</li>
      </ul>
    </div>
  </div>
</div>
<div id="app" class="cart py-container">
  <!--主内容-->
  <div class="checkout py-container">
    <div class="checkout-tit">
      <h4 class="tit-txt">填写并核对订单信息</h4>
    </div>
    <div class="checkout-steps">
      <!--收件人信息-->
      <div class="step-tit">
        <h5>收件人信息<span><a class="newadd">新增收货地址</a></span></h5>
      </div>
      <div class="step-cont">
        <div class="addressInfo">
          <ul class="addr-detail">
            <li class="addr-item">
              <div v-for="addr in addressList" :key="addr.id" @click="params.addressId = addr.id">
                <div :class="{con:true, name:true, selected: addr.id === params.addressId}">
                  <a href="javascript:;">{{addr.contact}}</a>
                </div>
                <div class="con address">
                  {{addr.contact}}{{addr.province}}{{addr.city}}{{addr.town}}{{addr.street}}
                  <span>{{handleMobile(addr.mobile)}}</span>
                  <span v-if="addr.isDefault" class="base">默认地址</span>
                </div>
                <div class="clearfix"></div>
              </div>
            </li>
          </ul>
        </div>
        <div class="hr"></div>
      </div>
      <div class="hr"></div>
      <!--支付和送货-->
      <div class="payshipInfo">
        <div class="step-tit">
          <h5>支付方式</h5>
        </div>
        <div class="step-cont">
          <ul class="payType">
            <li v-for="(pt, i) in paymentTypes" @click="params.paymentType=i+1"
                :class="{selected: i === params.paymentType-1}">
              {{pt}} <span v-show="i === params.paymentType-1" title="点击取消选择"></span>
            </li>
          </ul>
        </div>
        <div class="hr"></div>
        <div class="step-tit">
          <h5>送货清单</h5>
        </div>
        <div class="step-cont">
          <ul class="send-detail">
            <li>
              <div class="sendGoods">
                <ul class="yui3-g">
                  <li class="yui3-u-1-6">
                    <span><img :src="item.image" width="100" height="100"/></span>
                  </li>
                  <li class="yui3-u-7-12">
                    <div class="desc">{{item.name}}</div>
                    <div class="seven">
                      <div v-for="(v,k) in parseJson(item.spec)">
                        <span style="color: #504f4f">{{k}}</span> : {{v}}
                      </div>
                    </div>
                  </li>
                  <li class="yui3-u-1-12">
                    <div>&nbsp;</div>
                    <div class="price">￥{{util.formatPrice(item.price)}}</div>
                  </li>
                  <li class="yui3-u-1-12">
                    <div style="width: 60px; text-align: right">
                      <button class="num-btn" @click="incNum">+</button>
                      <div class="num">
                        <span>×</span>&nbsp;&nbsp;&nbsp;<input style="width: 22px" type="text" v-model="params.num">
                      </div>
                      <button class="num-btn" @click="decNum">-</button>
                    </div>
                  </li>
                  <li class="yui3-u-1-12">
                    <div class="exit">有货</div>
                  </li>
                </ul>
              </div>
            </li>
            <li></li>
            <li></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="order-summary">
    <div class="static fr">
      <div class="list">
        <span><i class="number">1</i>件商品，总商品金额</span>
        <em class="allprice">¥{{totalPrice}}</em>
      </div>
      <div class="list">
        <span>优惠券：</span>
        <em class="money">0.00</em>
      </div>
      <div class="list">
        <span>运费：</span>
        <em class="transport">0.00</em>
      </div>
    </div>
  </div>
  <div class="clearfix trade">
    <div class="fc-price">应付金额:　<span class="price">¥{{totalPrice}}</span></div>
    <div class="fc-receiverInfo">寄送至: {{address}}</div>
  </div>
  <div class="submit">
    <a class="sui-btn btn-danger btn-xlarge" href="javascript:void(0)" @click="toPay">提交订单</a>
  </div>
</div>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="js/common.js"></script>
<script>
  let app = new Vue({
    el: "#app",
    data() {
      return {
        util,
        paymentTypes: ["支付宝支付", "微信支付", "扣减余额"],
        addressList: [ // 地址列表
          { "id": 61, "userId": 2, "contact": "李佳星", "mobile": "13301212233", "province": "上海", "city": "上海", "town": "浦东新区", "street": "航头镇航头路", "isDefault": true}, {"id": 63, "userId": 2, "contact": "李小龙", "mobile": "13301212233", "province": "广东", "city": "佛山", "town": "永春", "street": "永春武馆", "isDefault": false}
        ],
        item: {}, // 商品信息
        params: {
          num: 1, // 商品购买数量
          paymentType: 3, // 支付方式
          addressId: 61, // 收货地址的id
          itemId: 0, // 商品id
        },
      }
    },
    created() {
      // 查询商品
      this.getItem();
      // 根据userId查询地址，这里userId写死为 2
      this.getAddress(2);
    },
    methods: {
      getItem() {
        // 获取url路径中的id
        let itemId = this.util.getUrlParam("id");
        // 根据id查询商品
        axios.get("/item/" + itemId)
          .then(resp => {
            this.item = resp.data
            this.params.itemId = resp.data.id;
          })
          .catch(err => console.log("err"))
      },
      getAddress(userId) {
        // 根据用户id查询地址列表
        axios.get("/address/uid/" + userId)
          .then(resp => this.addressList = resp.data)
          .catch(err => console.log("err"))
      },
      toPay() {
        // 发送ajax请求到微服务执行：下单、扣库存
        axios.post("/order", this.params)
          .then(resp => {
            // 获取订单id
            let orderId = resp.data;
            // 跳转到支付页面
            location.href = "/pay.html?id=" + orderId
          })
          .catch(err => {
            alert("下单失败，请重试！")
            console.log(err)
          });
      },
      handleMobile(mobile) {
        return mobile.substring(0, 4) + "****" + mobile.substring(8, 11)
      },
      incNum() {
        if (this.params.num < this.item.stock) {
          this.params.num++
        }
      },
      decNum() {
        if (this.params.num > 1) {
          this.params.num--
        }
      },
      parseJson(str) {
        if (!str) {
          return "";
        }
        return JSON.parse(str);
      }
    },
    computed:{
      address(){
        const address = this.addressList.find(addr => addr.id === this.params.addressId);
        return address.province + address.city
          + address.town + address.street + " 收件人："
          + address.contact + " " + this.handleMobile(address.mobile);
      },
      totalPrice(){
        return util.formatPrice(this.item.price * this.params.num);
      }
    }
  });
</script>
</body>

</html>